<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KKJSBridge Fetch Hook</title>
<style>
    button {
        background:#000;
        color:#fff;
        padding: 6px 12px;
        font-size: 14px;
        display:block;
        margin-bottom:5px;
        border:none;
        border-radius: 3px;
    }
</style>
</head>
<body>
	<button onclick="fetch_get_with_cookie()">fetch_get_with_cookie</button>
	<button onclick="fetch_post_with_cookie()">fetch_post_with_cookie</button>
	<button onclick="fetch_get_image()">fetch_get_image</button>
	<button onclick="fetch_get_html()">fetch_get_html</button>
	<div id="fetch_get_html_div"></div>
</body>
<script src="https://cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<script>eruda.init();</script>
<!-- <script type="text/javascript" src="fetch.umd.js"></script> -->
<script type="text/javascript">
	function fetch_get_with_cookie() {
		fetch('testFetchGet', {
  			method: 'GET',
		}).then(res => {
			res.text().then(function(text) {
		    	console.log(text);
		    });
		}).catch(error => {
			console.error('Error:', error)
		});
	}
	function fetch_post_with_cookie() {
		fetch('testFetchPost', {
  			method: 'POST',
  			body: 'bodyData'
		}).then(res => {
			res.text().then(function(text) {
		    	console.log(text);
		    });
		}).catch(error => {
			console.error('Error:', error)
		});
	}
	function fetch_get_image() {
		// https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
		fetch('https://developer.mozilla.org/static/img/embed/promos/inactive-css.cff96336bd5c.png').then(function(response) {
			if(response.ok) {
				return response.blob();
			}
			throw new Error('Network response was not ok.');
		}).then(function(myBlob) { 
			var objectURL = URL.createObjectURL(myBlob); 
			var img = document.createElement('img');
    		img.src = objectURL;
    		document.body.appendChild(img);
		}).catch(function(error) {
			console.log('There has been a problem with your fetch operation: ', error.message);
		});
	}
	function fetch_get_html() {
		fetch('testFetchGetHtml', {
  			method: 'GET',
		}).then(res => {
			res.text().then(function(text) {
		    	console.log(text);
		    	var div = document.getElementById('fetch_get_html_div');
	            var form = document.createElement('form');
				form.innerHTML = text;
	            div.append(form);
		    });
		}).catch(error => {
			console.error('Error:', error)
		});
	}
	
</script>
</html>
